<template>
  <!-- 分类 -->
  <view class="filling">
    <view class="filling_center">
      <view class="datas">
        <uni-datetime-picker
          v-model="range"
          type="daterange"
          :border="false"
          :clear-icon="false"
          rangeSeparator="至"
          @change="change"
        />
      </view>
    </view>
    <view class="filling_bottom">
      <text>合计:{{ count }}公斤</text>
      <text>金额:￥{{ price }}</text>
    </view>
  </view>
  <!-- 列表 -->
  <scroll-view
    scroll-y="true"
    enable-back-to-top
    @scrolltolower="loadMore"
    class="scroll-box"
    :style="{ height: pageHeight + 'px' }"
  >
    <FillingList :orderLists="orderLists" :status="true" v-if="type=='order'"></FillingList>
    <TakeoutList v-if="type=='takeout'" :orderLists="orderLists"></TakeoutList>
    <view v-if="!hasOrders" class="fillings" :style="{ height: pageHeight + 'px' }">
      <image :src="Empty"></image>
      <text>暂无订单</text>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { fillingOrder,getOrderList } from '@/gql/filling';
import { getDriverID } from '@/stores/driverID';
import { errorToast } from '@/utils/prompt';
import { Empty } from '@/utils/Static';
import FillingList from '@c/order/fillingList.vue';
import TakeoutList from '@c/order/takeoutList.vue';
import { toPublish } from '@mqtt';
import { format, subDays } from 'date-fns';
import { computed, onMounted, ref } from 'vue';
import { isH5 } from '@/utils/platform';
const props = defineProps({
	  type:{type:String},
	});
// static
const driver_id = getDriverID();
const orderLists = ref([]);
const hasOrders = computed(() => orderLists.value.length > 0);
const count = ref(0);
const price = ref('');
const carIDC = ref('');
const pageHeight = ref('');
// data
const now = new Date();
let end = format(now, 'yyyy-MM-dd');
const daysAgo = subDays(now, 6);
let start = format(daysAgo, 'yyyy-MM-dd');
const range = ref([start, end]);

const isLoading = ref(false);
const lastPage = ref(1);
const currentPage = ref(1);
onMounted(() => {
  const num = isH5 ? 180 : 220;
  uni.getSystemInfo({
    success: function(res) {
      pageHeight.value = (res.windowHeight - num).toString();
    },
  });
});
init();
function init() {
  isLoading.value = true;
  if(props.type=='order'){
    const payload = {
      query: fillingOrder,
      variables: {
        page: currentPage.value,
        start,
        end,
        cart_code: carIDC.value,
        from_driver_id: 0,
        driver_id,
      },
    };
    toPublish(
      'ql/driver/getOrderList',
      payload,
      (obj: any) => {
        const { fill_order_list } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...fill_order_list.list];
        lastPage.value = fill_order_list.lastpage;
        count.value = fill_order_list.count;
        price.value = fill_order_list.price;
      }
    );
  }else{
    const payload = {
      query: getOrderList,
      variables: {
        page: currentPage.value,
        starttime:start,
        endtime:end,
        driver_id,
      },
    };
    toPublish(
      'ql/take/getOrderList',
      payload,
      (obj: any) => {
        const { getOrderListByDriver } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getOrderListByDriver.list];
        lastPage.value = getOrderListByDriver.lastpage;
        count.value = getOrderListByDriver.amount;
        price.value = getOrderListByDriver.money;
      }
    );
  }
}
/**
 * 加载更多
 */
function loadMore() {
  if (currentPage.value < lastPage.value) {
    currentPage.value++;
    init();
  }
}
function change([sta, en]) {
  currentPage.value = 1;
  orderLists.value = [];
  start = sta;
  end = en;
  init();
}
</script>

<style scoped lang="less">
@import url('../../pages/order/less/fillingOrder.less');
</style>
<style>
.datas >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.datas >>> .uni-date-x {
  font-size: 30rpx !important;
}
.datas >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>
